<template>
    <div class="musicList">
        <div class="musicTop">
            <div class="title">发现好歌单</div>
            <div class="more">查看更多</div>
        </div>
        <div class="musicConttent">
            <van-swipe 
            :loop="false" 
            :width="150" 
            class="my-swipe" 
            :show-indicators="false"
            >
                <van-swipe-item v-for="item in musicList" :key="item">
                    <!-- 路由跳转 -->
                    <router-link :to="{path:'/itemMusic', query:{id:item.id}}"> 
                        <img :src="item.picUrl" alt=""/>
                        <span class="playCount">
                            <van-icon name="play" />
                            {{changeCount(item.playCount)}}
                        </span>
                        <span class="name">{{item.name}}</span>
                    </router-link>
                </van-swipe-item>          
            </van-swipe>
        </div>
    </div>
</template>

<script>
import {getMusicList} from '@/request/api/home.js';

export default {
   /** vue2 写法 */ 
//  data 保存的数据  (组件要以函数的形式)
 data(){
    return {
        musicList:[]
    }
 },
 methods:{
    async getGnedan(){
        let res = await getMusicList();
        //console.log(res)
        this.musicList = res.data.result;
    },
    changeCount:function(num){
        if(num>=100000000){
            return (num/100000000).toFixed(1) + "亿"
        }else if(num/10000){
            return (num/10000).toFixed(1) + "万"
        }
    }

 },
 //生命周期函数 mounted
 mounted(){
    this.getGnedan()
 }
}

/** Vue3 写法 */
  //还没写

</script>

<style lang="less" scoped>
.musicList{
    width: 100%;
    height: 4rem;
    padding: 0.2rem;    
}
.musicTop{
    width: 100%;
    height: 0.6rem;
    display: flex; 
    justify-content: space-between;
    margin-bottom: 0.2rem;
    .title{
        font-size: 0.4rem;
        font-weight: 900;
    }
    .more{
      border: 1px solid #ccc;
      text-align: center;
      line-height: 0.6rem;
      padding: 0 0.2rem;
      border-radius: 0.4rem;
    }
}
.musicConttent{
    width: 100%;
    height:3.5rem;
}
.van-swipe-item{
    padding-right: 0.2rem;
    position: relative;
    height: 3.5rem;
    img{
        width: 100%;
        height: 2.5rem;
        border-radius:10px ;
    }
}
.playCount{
    position: absolute;
    right: 0.3rem;
    z-index: 100;
    margin-top: 0.07rem;
    color: white;
   
}
.name{
    font-size: .25rem;
}

</style>